<template>
    <div class="page" ref="pageRef">
        <div class="page-container">
            <div class="page-title">
                <div class="left">
                    <div class="name">
                        {{ $route.meta.title }}
                        <a-tooltip
                            :getPopupContainer="getPopupContainer"
                            color="rgba(31,35,41,0.8)"
                        >
                            <template #title>
                                <div class="tip-title">
                                    查询支持近半年的明细数据，导出最多支持选择近一个月的数据。请定期及时下载，以免超期无法操作。
                                </div>
                            </template>
                            <div class="help-icon"></div>
                            <!-- <img src="@/assets/Lw/help.png" alt="" /> -->
                        </a-tooltip>
                    </div>
                    <SystemBreadcrumb />
                </div>
                <div class="search-box">
                    <a-input-search
                        width="460"
                        placeholder="请输入人员名称或手机号"
                        enter-button
                        v-model:value="searchObj['nameOrPhone']"
                        @search="search"
                    />
                </div>
                <a-button
                    type="primary"
                    @click="open = true"
                    :loading="exportLoading"
                    class="export-btn"
                >
                    <img class="icon" src="@/assets/Lw/export.png" alt="" />
                    <span> {{ exportLoading ? "导出中..." : "导出" }}</span>
                </a-button>
            </div>
            <div class="table-box">
                <div class="search-box">
                    <a-form layout="inline">
                        <a-form-item label="登录时间">
                            <a-range-picker
                                class="range-picker"
                                v-model:value="dateRange"
                                :presets="presets"
                                show-time
                                @change="search"
                            />
                        </a-form-item>
                        <a-form-item label="登录方式">
                            <a-select
                                v-model:value="searchObj['device_type']"
                                placeholder="请选择"
                                allowClear
                                @change="search"
                                :style="{ width: '90px' }"
                            >
                                <a-select-option value="">全部</a-select-option>
                                <a-select-option value="pc"
                                    >网页端</a-select-option
                                >
                                <a-select-option value="applet"
                                    >小程序</a-select-option
                                >
                            </a-select>
                        </a-form-item>
                    </a-form>
                </div>

                <a-table
                    :columns="columns"
                    :data-source="lazyTable.data"
                    :pagination="lazyTable.pagination"
                    :loading="lazyTable.loading"
                    @change="handleTableChange"
                    size="small"
                    :row-class-name="
                    (_record:any, index:number) =>
                        index % 2 === 1 ? 'table-striped' : null
                "
                >
                </a-table>
            </div>
        </div>

        <a-modal
            v-model:open="open"
            title="导出日志"
            @ok="hdlDownload"
            :getPopupContainer="getPopupContainer"
        >
            <a-form>
                <a-form-item label="登录方式">
                    <a-select
                        v-model:value="formState.device_type"
                        placeholder="请选择"
                    >
                        <a-select-option value="">全部</a-select-option>
                        <a-select-option value="pc">网页端</a-select-option>
                        <a-select-option value="applet">小程序</a-select-option>
                    </a-select>
                </a-form-item>
                <a-form-item label="时间范围">
                    <a-select
                        v-model:value="formState.timerangeType"
                        placeholder="请选择"
                    >
                        <a-select-option value="week">近一周</a-select-option>
                        <a-select-option value="month">近一月</a-select-option>
                    </a-select>
                </a-form-item>
                <div class="tips-box">
                    <div>1、点击“确定”后，日志开始导出。</div>
                    <div>
                        2、建议保持窗口打开，系统会自动将报表下载到本地；若关闭窗口，可能导致下载失败。
                    </div>
                </div>
            </a-form>
        </a-modal>
    </div>
</template>

<script setup lang="ts">
    import { ref } from "vue";
    import { useRouter, useRoute, stringifyQuery } from "vue-router";
    import { useLazyLable } from "@/hooks/useLazyLable";
    import logLoginService from "@/service/logLogin.service";
    import { fileStreamDownload } from "@/utils/fileStreamDownload";
    import { ExportQueryObj } from "@/type/logLogin";
    import useGlobalStore from "@/stores/global.store";
    import { storeToRefs } from "pinia";
    import SystemBreadcrumb from "@/components/SystemBreadcrumb/SystemBreadcrumb.vue";
    const pageRef = ref();

    let { authApis } = storeToRefs(useGlobalStore());
    const router = useRouter();
    const route = useRoute();

    // 列表
    const lazyTableStore = useLazyLable(
        router,
        route,
        logLoginService,
        undefined,
        "string",
        true,
        {
            startTime: "start_time",
            endTime: "end_time",
        },
    );
    const {
        lazyTable,
        searchObj,
        search,
        handleTableChange,
        dateRange,
        presets,
    } = lazyTableStore;

    const formState = ref(new ExportQueryObj());
    const open = ref(false);
    const exportLoading = ref(false);
    const hdlDownload = async () => {
        let { timerangeType, _timerangeType, ...rest } = formState.value;
        try {
            if (exportLoading.value) {
                return;
            }
            exportLoading.value = true;
            open.value = false;
            let res = await logLoginService.loginExport(
                stringifyQuery({ ...rest }),
                {
                    responseType: "blob",
                },
            );

            fileStreamDownload(res);
        } catch (err) {
            console.log(err);
        } finally {
            exportLoading.value = false;
        }
    };

    const columns = [
        {
            dataIndex: "datetime",
            title: "登录时间",
        },
        {
            dataIndex: "mobile",
            title: "登录账号",
        },
        {
            dataIndex: "username",
            title: "登录人",
        },
        {
            dataIndex: "client_ip",
            title: "登录IP",
        },
        {
            dataIndex: "client_ip_area",
            title: "登录地",
        },
        {
            dataIndex: "device_type",
            title: "登录方式",
        },
    ];

    const getPopupContainer = () => {
        return pageRef.value;
    };
</script>

<style lang="scss" scoped src="./LogLogin.scss"></style>
